<template>
  <div class="app-container">
    <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="balance" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">账户积分</div>
          <count-to
            :start-val="0"
            :end-val='endPriceVal'
            :duration="1800"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="freeze_credit" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">冻结金额</div>
          <count-to
            :start-val="0"
            :end-val='endFreePriceVal'
            :duration="1800"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="credit_granting" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">授信金额</div>
          <count-to
            :start-val="0"
            :end-val='endSxPriceVal'
            :duration="1800"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">累计充值金额</div>
          <count-to
            :start-val="0"
            :end-val='endSumPriceVal'
            :duration="1800"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
  </el-row>

  <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="审批状态" clearable size="small" style="width: 240px">
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="middle" @click="handleOperation" v-hasPermi="['walletApprove:wallet:add']">资金操作</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getApproveList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="approveList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="商户编号" align="center" prop="agtPhone" />
      <el-table-column label="审批人名称" align="center" prop="operatorName" />
      <el-table-column label="审批状态" align="center" prop="status" :formatter="statusFormat" />
      <el-table-column label="金额" align="center" prop="cashMoney" />
      <el-table-column label="操作类型" align="center" prop="operationType" :formatter="cashOperationTypeFormat"/>
      <el-table-column label="审批时间" align="center" prop="checkTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.checkTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['walletApprove:wallet:update']">审核</el-button>
            </template>
          </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getApproveList"
    />
    <!-- 充值或提现操作对话框 -->
    <el-dialog :title="title" :visible.sync="openWallet" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item  label="金额" prop="cashMoney">
              <el-input v-model="form.cashMoney" placeholder="请输入金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作类型" prop="operationType">
              <el-select v-model="form.operationType" placeholder="请选择">
                <el-option v-for="dict in cashOperationTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelWallet">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 审批操作对话框 -->
    <el-dialog :title="title" :visible.sync="openApprove" width="600px" append-to-body>
      <el-form ref="approveForm" :model="approveForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="审批类型" prop="status" >
              <el-select v-model="approveForm.status" placeholder="请选择">
                <el-option v-for="dict in approveOperationTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="金额" prop="cashMoney">
              <el-input v-model="approveForm.cashMoney" placeholder="请输入金额" v-bind:disabled="form.id" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="approveForm.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApproveForm">确 定</el-button>
        <el-button @click="cancelApprove">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import CountTo from "vue-count-to";
import { queryAgtWallet,queryWalletApproveList,addWalletApprove,updateApproveInfo} from "@/api/agentWallet/agentWalletInfo";
import Cookies from "js-cookie";

export default {
  components: {
    CountTo,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 当前商户账号
      agtPhone: null,
      // 选中数组
      ids: [],
      // 资金明细表格数据
      approveList: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openWallet: false,
      openApprove: false,
      // 日期范围
      dateRange: [],
      // 审批状态数据字典
      statusOptions: [],
      // 资金操作类型数据字典
      cashOperationTypeOptions: [],
      // 审批操作类型数据字典：
      approveOperationTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: undefined,
        operationType:undefined  
      },
      // 表单校验
      rules: {
        operationType: [
          { required: true, message: "操作类型不能为空", trigger: "blur" },
        ],
        cashMoney: [
          {
            required: true,
            message: "请输入操作金额",
            trigger: "change"
          },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "请输入合法的金额数字，最多两位小数",
            trigger: "change"
          }
        ],
      },
      // 表单参数
      form: {},
      approveForm: {},
      endFreePriceVal: undefined,
      endPriceVal: undefined,
      endSxPriceVal: undefined,
      endSumPriceVal: undefined,
    };
  },
  created(){
    this.agtPhone = Cookies.get("agtPhone");
    this.getApproveList();
    this.getDicts("approve_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("cash_operation_type").then((response) => {
      this.cashOperationTypeOptions = response.data;
    });
    this.getDicts("approve_operation_type").then((response) => {
      this.approveOperationTypeOptions = response.data;
    });
    queryAgtWallet().then((response) =>{
      if(null == response.value){
        this.endPriceVal = 0
        this.endFreePriceVal = 0
        this.endSxPriceVal = 0
        this.endSumPriceVal = 0
      }else{
        this.endPriceVal = response.value.credit;
        this.endFreePriceVal = response.value.freeze;
        this.endSxPriceVal = response.value.sxCredit;
        this.endSumPriceVal = response.value.sumCashMoney;
      }
    });
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit("handleSetLineChartData", type);
    },
    /** 查询资金操作记录列表 */
    getApproveList() {
      this.loading = true;
      queryWalletApproveList(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
        this.approveList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 审批状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 资金操作类型字典翻译
    cashOperationTypeFormat(row, column) {
      return this.selectDictLabel(this.cashOperationTypeOptions, row.operationType);
    },
    // 取消按钮
    cancelWallet() {
      this.openWallet = false;
      this.reset();
    },
    // 取消按钮
    cancelApprove() {
      this.openApprove = false;
      this.resetApprove();
    },
    // 表单重置
    reset() {
      this.form = {
        orderNo: undefined,
        reqStreamId: undefined,
        agtPhone: undefined,
        applyTime: undefined
      };
      this.resetForm("form");
    },
    // 表单重置
    resetApprove() {
      this.approveForm = {
        status: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getApproveList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.postId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleOperation() {
      this.reset();
      this.openWallet = true;
      this.title = "商户资金操作申请";
    },
    handleUpdate(row) {
      this.reset();
      this.openApprove = true;
      this.approveForm.cashMoney = row.cashMoney;
      this.approveForm.id = row.id;
      this.approveForm.agtPhone = row.agtPhone;
      this.title = "资金审批操作";
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.agtPhone = this.agtPhone;
          addWalletApprove(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("发起资金操作成功");
                this.openWallet = false;
                this.getApproveList();
              }
            });
        }
      });
    },
    /** 提交按钮 */
    submitApproveForm: function () {
          updateApproveInfo(this.approveForm).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("审批操作成功");
                this.openApprove = false;
                this.getApproveList();
              }
            });
    },
  },
};
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
